import React from 'react'
import { Form, Input, Button, Message } from 'antd';
import api from '../../../api/password';
import md5 from 'md5';
const FormItem = Form.Item;


import PanelBox from '../../../components/PanelBox';

import './index.less'

class ManageForm extends React.Component {
  state = {
    loading: false
  };
  submit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          loading: true
        });
        values.newPassword = md5(values.newPassword);
        values.password = md5(values.password);
        api.put('/password', { ...values }).then((res) => {
          const result = res.data;
          if (result.code == 0) {
            Message.success('修改成功！');
            this.props.form.resetFields();
          } else {
            Message.error(result.message);
          }
          this.setState({
            loading: false
          });
        }).catch(e=>{
          Message.error("提交失败");
          this.setState({
            loading: false
          });
        });
      }
    });
  }

  clear = () => {
    this.props.form.resetFields();
  }

  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPassword')) {
      callback('两次新密码输入不一样!');
    } else {
      callback();
    }
  }
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  componentDidMount = () => {
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 7 },
    };

    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 15,
          offset: 9,
        },
        sm: {
          span: 15,
          offset: 9,
        },
      },
    };

    return (
      <Form onSubmit={this.submit}>
        <FormItem
          {...formItemLayout}
          label="原密码"
          hasFeedback
        >
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '原始密码不能为空!' }],
            initialValue: ''
          })(
            <Input type="password" />
            )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="新密码"
          hasFeedback
        >
          {getFieldDecorator('newPassword', {
            rules: [{ required: true, message: '新密码不能为空!' },
            { min: 6, message: '密码不能低于6个字符' },
            {
              validator: this.checkConfirm,
            }],
            initialValue: ''
          })(
            <Input type="password" />
            )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="确认新密码"
          hasFeedback
        >
          {getFieldDecorator('confirm', {
            rules: [{ required: true, message: '确认新密码不能为空!' }, {
              validator: this.checkPassword,
            }],
            initialValue: ''
          })(
            <Input type="password" onBlur={this.handleConfirmBlur} />
            )}
        </FormItem>
        <FormItem {...tailFormItemLayout}>
          <Button loading={this.state.loading} type="primary" htmlType="submit" size="large" style={{ marginRight: '10px' }}>提交</Button>
          <Button onClick={this.clear} disabled={this.state.loading}>清空</Button>
        </FormItem>
      </Form>
    );
  }
}

const PasswordForm = Form.create()(ManageForm);

export default class Passowrd extends React.Component {
  render() {
    return (
      <PanelBox>
        <div className="password-content">
          <PasswordForm/>
        </div>
      </PanelBox>
    )
  }

}
